<template>
	<view class="tabbar" @scroll="onScroll">
		<view class="list" v-for="(item, index) in list" :key="item.path" :class="item.main ? 'orders' : ''" @click="skip(item.path)">
			<view class="orders-box" v-if="item.main"><span :class="`iconfont icon-${item.icon}`"></span></view>
			<span v-else :class="`iconfont icon-${item.icon} ${current === index ? 'active' : ''}`"></span>
			<text :class="current === index ? 'active' : ''">{{ item.title }}</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
	current: {
		type: Number,
		default: 0
	}
});
const list = ref([
	{
		path: '/pages/tabs/index',
		title: '首页',
		icon: 'dasao'
	},
	{
		path: '/pages/tabs/service',
		title: '服务',
		icon: 'fuwu2'
	},
	// {
	// 	path: '/pages/tabs/orders',
	// 	title: '去下单',
	// 	icon: 'xiadanma',
	// 	main: true
	// },
	{
		path: '/pages/tabs/indent',
		title: '订单',
		icon: 'dingdan1'
	},
	{
		path: '/pages/tabs/my',
		title: '我的',
		icon: 'wode1'
	}
]);

//跳转
const skip = (path) => uni.switchTab({ url: path });
//页面滚动
const onScroll = (e) => {
	console.log(e);
};
</script>

<style lang="scss" scoped>
.tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	z-index: 10;
	display: flex;
	justify-content: space-around;
	align-items: center;

	box-shadow: 10rpx 10rpx 10rpx 10rpx #f7f7f7;
	border-top: 1px solid #f0f0f0;
	.list {
		text-align: center;
		font-size: 24rpx;
		padding: 10rpx;
		.iconfont {
			display: block;
			font-size: 44rpx;
			margin-bottom: 5rpx;
		}
		.active {
			color: #1296db;
		}
	}
	// .orders {
	// 	width: 11%;
	// 	background-color: #fff;
	// 	margin-top: -50rpx;
	// 	box-shadow: 0px -8px 7px -4px #f7f7f7;
	// 	border-radius: 60rpx 60rpx 0 0;
	// 	border: 1px solid #f0f0f0;
	// 	border-left: 0;
	// 	border-right: 0;
	// 	border-bottom: 0;
	// 	.orders-box {
	// 		background: #1296db;
	// 		border-radius: 50%;
	// 		width: 50rpx;
	// 		height: 50rpx;
	// 		padding: 8rpx;
	// 		margin: 10rpx auto 20rpx;
	// 		.iconfont {
	// 			color: #fff;
	// 		}
	// 	}
	// }
}
</style>